<template>
  <div class="login">
    <img src="../../assets/Hklog.png" alt="" class="imgs">
    <div class="login-form">
      <el-form ref="form" label-width="100px" :rules="rules" :model="formData">
        <div class="form-text">
          <el-form-item label="用户名：" prop="userName">
            <el-input v-model="formData.userName" type="text" class="text" placeholder="账号" />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="formData.password" type="password" placeholder="密码" />
          </el-form-item>
        </div>
        <el-button type="primary" @click.native="loginBtn">登录</el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
import { loginAPI } from '@/api/user'
import { Message } from 'element-ui'
export default {
  name: 'Login',
  data() {
    return {
      formData: {
        userName: 'admin',
        password: 'admin'
      },
      rules: {
        userName: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 1, max: 11, message: '请输入11位账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 5, max: 12, message: '请输入6-12位密码', trigger: 'blur' }
        ]
      }

    }
  },

  methods: {
    // 登录功能
    loginBtn() {
      this.$refs.form.validate(async(flag) => {
        if (!flag) return
        const { data } = await loginAPI(this.formData)
        localStorage.setItem('token', data.token)
        localStorage.setItem('userName', data.userName)
        Message.success('登录成功！')
        this.$router.push('/')
      })
    }
  }
}
</script>
<style scoped lang="scss">
.login {
font-family:Verdana;
position: relative;
 width: 100%;
 height: 100%;
 background-attachment: fixed;
background: url("../../assets/bg.jpg") no-repeat;
 background-size: 100% 135%;
.imgs{
 position: absolute;
left: 50%;
top: 25%;
transform: translate(-42%, -50%);
 }
.login-form{
 margin-top: 50px;
 position: absolute;
left: 50%;
 top: 35%;
transform: translate(-50%, -50%);
}
}
::v-deep .el-input__inner{
 width: 300px !important;
 background: transparent;
}
::v-deep .el-form-item__label{
font-size: 16px;
font-weight: 600;
color: #000;
}
::v-deep .el-button{
margin-top: 20px !important;
width: 300px;
 border: 1px solid #000;
 position: absolute;
 left: 50%;
 transform: translateX(-36%)
}
.login {
font-family:Verdana;
position: relative;
 width: 100%;
 height: 100%;
 background-attachment: fixed;
background: url("../../assets/bg.jpg") no-repeat;
 background-size: 100% 135%;
.imgs{
 position: absolute;
left: 50%;
top: 25%;
transform: translate(-42%, -50%);
 }
.login-form{
 margin-top: 50px;
 position: absolute;
left: 50%;
 top: 35%;
transform: translate(-50%, -50%);
}
}
::v-deep .el-input__inner{
 width: 300px !important;
 background: transparent;
}
::v-deep .el-form-item__label{
font-size: 16px;
font-weight: 600;
color: #000;
}
::v-deep .el-button{
margin-top: 20px !important;
width: 300px;
 border: 1px solid #000;
 position: absolute;
 left: 50%;
 transform: translateX(-36%)
}
</style>
